<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
   <router-link to="/home">首页</router-link>
    <div>
        <h1>用户管理中心</h1>
        <router-link to="/user/xiaohong">xiaohong</router-link>
        <router-link to="/user/xiaoming">xiaoming</router-link>
        <router-link to="/user/xiaogang">xiaogang</router-link>
    </div>
    <router-view></router-view>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
<script>
    let Home={
      template:`<h1>这是home组件</h1>`
    };

    let User={
       template:`
        用户信息
       <div><p>姓名：{{$route.params.name}}</p></div>`
    };
    let router=new VueRouter({
       routes:[
           {path:'/home',component:Home},
           {path:'/user/:name',component:User}

       ]
    });
    var vm = new Vue({
        el: '#app',
        data: {
            
        },
        router:router
    })
</script>
</body>
</html>